<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Icons - SMS Admin Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="sms">

        <!-- google font -->
        <link href="http://fonts.googleapis.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" />

        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <link href="css/sms.css" rel="stylesheet">
        <link href="css/sms-responsive.css" rel="stylesheet">
        <link href="css/sms-helper.css" rel="stylesheet">
        <link href="css/sms-icon.css" rel="stylesheet">
        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/elusive-webfont.css" rel="stylesheet"> <!-- new icon, add in v1.2 -->
        <link href="css/animate.css" rel="stylesheet">
        <link href="css/uniform.default.css" rel="stylesheet">
        
        <style type="text/css">
            /* just for this demo page */
            .icons-list li{
                float:left;
                width:25%;
            }
            .socialico > li{
                margin-bottom: 10px;
            }
            .socialico > li > i{
                font-size: 64px;
            }
            .socialico > li > i{
                line-height: 64px;
            }
            
        </style>
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <!-- section header -->
        <header class="header" data-spy="affix" data-offset-top="0">
            <!--nav bar helper-->
            <div class="navbar-helper">
                <div class="row-fluid">
                    <!--panel site-name-->
                    <div class="span2">
                        <div class="panel-sitename">
                            <h2><a href="index.html"><span class="color-teal">SMS</span>&alpha;</a></h2>
                        </div>
                    </div>
                    <!--/panel name-->

                    <div class="span6">
                        <!--panel search-->
                        <div class="panel-search">
                            <form>
                                <div class="input-icon-append">
                                    <button type="submit" rel="tooltip-bottom" title="search" class="icon"><i class="icofont-search"></i></button>
                                    <input class="input-large search-query grd-white" maxlength="23" placeholder="Search here..." type="text">
                                </div>
                            </form>
                        </div><!--/panel search-->
                    </div>
                    <div class="span4">
                        <!--panel button ext-->
                        <div class="panel-ext">
                            <div class="btn-group">
                                <!--notification-->
                                <a class="btn btn-danger btn-small" data-toggle="dropdown" href="#" title="3 notification">3</a>
                                <ul class="dropdown-menu dropdown-notification">
                                    <li class="dropdown-header grd-white"><a href="#">View All Notifications</a></li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- <li class="dropdown-footer"><a href=""></a></li> -->
                                </ul><!--notification-->
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                    Shortcut
                                </a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li><a tabindex="-1" href="calendar.html">Calendar</a></li>
                                    <li><a tabindex="-1" href="invoice.html">Invoice</a></li>
                                    <li><a tabindex="-1" href="message.html">Message</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Sample Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="pricing.html">Pricing</a></li>
                                            <li><a tabindex="-1" href="bonus-page/resume/index.html">Resume</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Error Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="403.html">Error 403</a></li>
                                            <li><a tabindex="-1" href="404.html">Error 404</a></li>
                                            <li><a tabindex="-1" href="405.html">Error 405</a></li>
                                            <li><a tabindex="-1" href="500.html">Error 500</a></li>
                                            <li><a tabindex="-1" href="503.html">Error 503</a></li>
                                            <li><a tabindex="-1" href="under-construction.html">Under Construction</a></li>
                                            <li><a tabindex="-1" href="coming-soon.html">Coming Son</a></li>
                                        </ul>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small" href="#">Other Action</a>
                            </div>
                            <div class="btn-group user-group">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <img class="corner-all" align="middle" src="img/user-thumb.jpg" title="John Doe" alt="john doe" /> <!--this for display on PC device-->
                                    <button class="btn btn-small btn-inverse">John Doe</button> <!--this for display on tablet and phone device-->
                                </a>
                                <ul class="dropdown-menu dropdown-user" role="menu" aria-labelledby="dLabel">
                                    <li>
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="img-circle" src="img/user.jpg" title="profile" alt="profile" />
                                            </a>
                                            <div class="media-body description">
                                                <p><strong>John Doe</strong></p>
                                                <p class="muted">johndoe@mail.com</p>
                                                <p class="action"><a class="link" href="#">Activity</a> - <a class="link" href="#">Setting</a></p>
                                                <a class="btn btn-primary btn-small btn-block">View Profile</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="dropdown-footer">
                                        <div>
                                            <a class="btn btn-small pull-right" href="login.html">Logout</a>
                                            <a class="btn btn-small" href="#">Add Account</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div><!--panel button ext-->
                    </div>
                </div>
            </div><!--/nav bar helper-->
        </header>

        <!-- section content -->
        <section class="section">
            <div class="row-fluid">
                <!-- span side-left -->
                <div class="span1">
                    <!--side bar-->
                    <aside class="side-left">
                        <ul class="sidebar">
                            <li>
                                <a href="index.html" title="dashboard">
                                    <div class="helper-font-24">
                                        <i class="icofont-dashboard"></i>
                                    </div>
                                    <span class="sidebar-text">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a href="interface.html" title="interface">
                                    <div class="helper-font-24">
                                        <i class="icofont-magnet"></i>
                                    </div>
                                    <span class="sidebar-text">Interface</span>
                                </a>
                            </li>
                            <li>
                                <a href="form.html" title="form">
                                    <div class="badge badge-important">3</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-edit"></i>
                                    </div>
                                    <span class="sidebar-text">Form</span>
                                </a>
                                <ul class="sub-sidebar-form corner-top shadow-white">
                                    <li class="title muted">Quick Upload</li>
                                    <li>
                                        <input type="file" data-form="uniform" onchange="alert('your progres uploading file...')" />
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="form.html" title="form element" class="corner-all">
                                            <i class="icofont-file"></i>
                                            <span class="sidebar-text">Form Element</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="code-editor.html" title="code editor" class="corner-all">
                                            <i class="icofont-book"></i>
                                            <span class="sidebar-text">Code Editor</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="gallery.html" title="gallery" class="corner-all">
                                            <i class="icofont-picture"></i>
                                            <span class="sidebar-text">Gallery</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="charts.html" title="charts">
                                    <div class="helper-font-24">
                                        <i class="icofont-bar-chart"></i>
                                    </div>
                                    <span class="sidebar-text">charts</span>
                                </a>
                            </li>
                            <li>
                                <a href="tables.html" title="table">
                                    <div class="helper-font-24">
                                        <i class="icofont-table"></i>
                                    </div>
                                    <span class="sidebar-text">Tables</span>
                                </a>
                            </li>
                            <li>
                                <a href="grids.html" title="grids">
                                    <div class="helper-font-24">
                                        <i class="icofont-columns"></i>
                                    </div>
                                    <span class="sidebar-text">Grids</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="icons.html" title="icons">
                                    <div class="helper-font-24">
                                        <i class="icofont-star"></i>
                                    </div>
                                    <span class="sidebar-text">Icons</span>
                                </a>
                            </li>
                            <li>
                                <a href="widgets.html" title="widgets">
                                    <div class="helper-font-24">
                                        <i class="icofont-reorder"></i>
                                    </div>
                                    <span class="sidebar-text">Widgets</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="more">
                                    <div class="badge badge-important">5</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-th-large"></i>
                                    </div>
                                    <span class="sidebar-text">More</span>
                                </a>
                                <ul class="sub-sidebar corner-top shadow-silver-dark">
                                    <li>
                                        <a href="404.html" title="not found">
                                            <div class="helper-font-24">
                                                <i class="icofont-warning-sign"></i>
                                            </div>
                                            <span class="sidebar-text">404</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="login.html" title="login">
                                            <div class="helper-font-24">
                                                <i class="icofont-lock"></i>
                                            </div>
                                            <span class="sidebar-text">Login</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="invoice.html" title="invoice">
                                            <div class="helper-font-24">
                                                <i class="icofont-barcode"></i>
                                            </div>
                                            <span class="sidebar-text">Invoice</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="pricing.html" title="pricing table">
                                            <div class="helper-font-24">
                                                <i class="icofont-briefcase"></i>
                                            </div>
                                            <span class="sidebar-text">Pricing</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="bonus-page/resume/index.html" title="resume">
                                            <div class="helper-font-24">
                                                <i class="icofont-user"></i>
                                            </div>
                                            <span class="sidebar-text">Resume</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </aside><!--/side bar -->
                </div><!-- span side-left -->
                
                <!-- span content -->
                <div class="span9">
                    <!-- content -->
                    <div class="content">
                        <!-- content-header -->
                        <div class="content-header">
                            <ul class="content-header-action pull-right">
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-green color-white"><i class="icofont-plus-sign"></i></div>
                                        <div class="action-text color-green">8765 <span class="helper-font-small color-silver-dark">Visits</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-teal color-white"><i class="icofont-user-md"></i></div>
                                        <div class="action-text color-teal">1437 <span class="helper-font-small color-silver-dark">Users</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-orange color-white">$</div>
                                        <div class="action-text color-orange">4367 <span class="helper-font-small color-silver-dark">Orders</span></div>
                                    </a>
                                </li>
                            </ul>
                            <h2><i class="icofont-star"></i> Icons</h2>
                        </div><!-- /content-header -->
                        
                        <!-- content-breadcrumb -->
                        <div class="content-breadcrumb">
                            <!--breadcrumb-nav-->
                            <ul class="breadcrumb-nav pull-right">
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link">
                                        <i class="icofont-money"></i> Orders <span class="color-red">(+12)</span>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link">
                                        <i class="icofont-user"></i> Users <span class="color-red">(+34)</span>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link dropdown-toggle" data-toggle="dropdown">
                                        <i class="icofont-tasks"></i> Tasks
                                        <i class="icofont-caret-down"></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Some Action</a></li>
                                        <li><a href="#">Other Action</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Something Else</a></li>
                                    </ul>
                                </li>
                            </ul><!--/breadcrumb-nav-->
                            
                            <!--breadcrumb-->
                            <ul class="breadcrumb">
                                <li><a href="index.html"><i class="icofont-home"></i> Dashboard</a> <span class="divider">&rsaquo;</span></li>
                                <li><a href="icons.html">Icons</a> <span class="divider">&rsaquo;</span></li>
                                <li class="active">Data elements</li>
                            </ul><!--/breadcrumb-->
                        </div><!-- /content-breadcrumb -->
                        
                        <!-- content-body -->
                        <div class="content-body">
                            <!-- icons -->
                            <div class="row-fluid">
                                <div class="span12">
                                    
                                    <!-- =========================================
                                                        ICON GLYPHS
                                    =========================================== -->
                                    <div class="box corner-all">
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rotateOut">&times;</a>
                                            </div>
                                            <span>Icon Glyphs</span>
                                        </div><!--/box-header-->
                                        <div class="box-body">
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="icon-glass"></i> icon-glass</li>
                                                <li><i class="icon-music"></i> icon-music</li>
                                                <li><i class="icon-search"></i> icon-search</li>
                                                <li><i class="icon-envelope"></i> icon-envelope</li>
                                                <li><i class="icon-heart"></i> icon-heart</li>
                                                <li><i class="icon-star"></i> icon-star</li>
                                                <li><i class="icon-star-empty"></i> icon-star-empty</li>
                                                <li><i class="icon-user"></i> icon-user</li>
                                                <li><i class="icon-film"></i> icon-film</li>
                                                <li><i class="icon-th-large"></i> icon-th-large</li>
                                                <li><i class="icon-th"></i> icon-th</li>
                                                <li><i class="icon-th-list"></i> icon-th-list</li>
                                                <li><i class="icon-ok"></i> icon-ok</li>
                                                <li><i class="icon-remove"></i> icon-remove</li>
                                                <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
                                                <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
                                                <li><i class="icon-off"></i> icon-off</li>
                                                <li><i class="icon-signal"></i> icon-signal</li>
                                                <li><i class="icon-cog"></i> icon-cog</li>
                                                <li><i class="icon-trash"></i> icon-trash</li>
                                                <li><i class="icon-home"></i> icon-home</li>
                                                <li><i class="icon-file"></i> icon-file</li>
                                                <li><i class="icon-time"></i> icon-time</li>
                                                <li><i class="icon-road"></i> icon-road</li>
                                                <li><i class="icon-download-alt"></i> icon-download-alt</li>
                                                <li><i class="icon-download"></i> icon-download</li>
                                                <li><i class="icon-upload"></i> icon-upload</li>
                                                <li><i class="icon-inbox"></i> icon-inbox</li>

                                                <li><i class="icon-play-circle"></i> icon-play-circle</li>
                                                <li><i class="icon-repeat"></i> icon-repeat</li>
                                                <li><i class="icon-refresh"></i> icon-refresh</li>
                                                <li><i class="icon-list-alt"></i> icon-list-alt</li>
                                                <li><i class="icon-lock"></i> icon-lock</li>
                                                <li><i class="icon-flag"></i> icon-flag</li>
                                                <li><i class="icon-headphones"></i> icon-headphones</li>
                                                <li><i class="icon-volume-off"></i> icon-volume-off</li>
                                                <li><i class="icon-volume-down"></i> icon-volume-down</li>
                                                <li><i class="icon-volume-up"></i> icon-volume-up</li>
                                                <li><i class="icon-qrcode"></i> icon-qrcode</li>
                                                <li><i class="icon-barcode"></i> icon-barcode</li>
                                                <li><i class="icon-tag"></i> icon-tag</li>
                                                <li><i class="icon-tags"></i> icon-tags</li>
                                                <li><i class="icon-book"></i> icon-book</li>
                                                <li><i class="icon-bookmark"></i> icon-bookmark</li>
                                                <li><i class="icon-print"></i> icon-print</li>
                                                <li><i class="icon-camera"></i> icon-camera</li>
                                                <li><i class="icon-font"></i> icon-font</li>
                                                <li><i class="icon-bold"></i> icon-bold</li>
                                                <li><i class="icon-italic"></i> icon-italic</li>
                                                <li><i class="icon-text-height"></i> icon-text-height</li>
                                                <li><i class="icon-text-width"></i> icon-text-width</li>
                                                <li><i class="icon-align-left"></i> icon-align-left</li>
                                                <li><i class="icon-align-center"></i> icon-align-center</li>
                                                <li><i class="icon-align-right"></i> icon-align-right</li>
                                                <li><i class="icon-align-justify"></i> icon-align-justify</li>
                                                <li><i class="icon-list"></i> icon-list</li>

                                                <li><i class="icon-indent-left"></i> icon-indent-left</li>
                                                <li><i class="icon-indent-right"></i> icon-indent-right</li>
                                                <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
                                                <li><i class="icon-picture"></i> icon-picture</li>
                                                <li><i class="icon-pencil"></i> icon-pencil</li>
                                                <li><i class="icon-map-marker"></i> icon-map-marker</li>
                                                <li><i class="icon-adjust"></i> icon-adjust</li>
                                                <li><i class="icon-tint"></i> icon-tint</li>
                                                <li><i class="icon-edit"></i> icon-edit</li>
                                                <li><i class="icon-share"></i> icon-share</li>
                                                <li><i class="icon-check"></i> icon-check</li>
                                                <li><i class="icon-move"></i> icon-move</li>
                                                <li><i class="icon-step-backward"></i> icon-step-backward</li>
                                                <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
                                                <li><i class="icon-backward"></i> icon-backward</li>
                                                <li><i class="icon-play"></i> icon-play</li>
                                                <li><i class="icon-pause"></i> icon-pause</li>
                                                <li><i class="icon-stop"></i> icon-stop</li>
                                                <li><i class="icon-forward"></i> icon-forward</li>
                                                <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
                                                <li><i class="icon-step-forward"></i> icon-step-forward</li>
                                                <li><i class="icon-eject"></i> icon-eject</li>
                                                <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
                                                <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
                                                <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
                                                <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
                                                <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
                                                <li><i class="icon-ok-sign"></i> icon-ok-sign</li>

                                                <li><i class="icon-question-sign"></i> icon-question-sign</li>
                                                <li><i class="icon-info-sign"></i> icon-info-sign</li>
                                                <li><i class="icon-screenshot"></i> icon-screenshot</li>
                                                <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
                                                <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
                                                <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
                                                <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
                                                <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
                                                <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
                                                <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
                                                <li><i class="icon-share-alt"></i> icon-share-alt</li>
                                                <li><i class="icon-resize-full"></i> icon-resize-full</li>
                                                <li><i class="icon-resize-small"></i> icon-resize-small</li>
                                                <li><i class="icon-plus"></i> icon-plus</li>
                                                <li><i class="icon-minus"></i> icon-minus</li>
                                                <li><i class="icon-asterisk"></i> icon-asterisk</li>
                                                <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
                                                <li><i class="icon-gift"></i> icon-gift</li>
                                                <li><i class="icon-leaf"></i> icon-leaf</li>
                                                <li><i class="icon-fire"></i> icon-fire</li>
                                                <li><i class="icon-eye-open"></i> icon-eye-open</li>
                                                <li><i class="icon-eye-close"></i> icon-eye-close</li>
                                                <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
                                                <li><i class="icon-plane"></i> icon-plane</li>
                                                <li><i class="icon-calendar"></i> icon-calendar</li>
                                                <li><i class="icon-random"></i> icon-random</li>
                                                <li><i class="icon-comment"></i> icon-comment</li>
                                                <li><i class="icon-magnet"></i> icon-magnet</li>

                                                <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
                                                <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
                                                <li><i class="icon-retweet"></i> icon-retweet</li>
                                                <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
                                                <li><i class="icon-folder-close"></i> icon-folder-close</li>
                                                <li><i class="icon-folder-open"></i> icon-folder-open</li>
                                                <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
                                                <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
                                                <li><i class="icon-hdd"></i> icon-hdd</li>
                                                <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
                                                <li><i class="icon-bell"></i> icon-bell</li>
                                                <li><i class="icon-certificate"></i> icon-certificate</li>
                                                <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
                                                <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
                                                <li><i class="icon-hand-right"></i> icon-hand-right</li>
                                                <li><i class="icon-hand-left"></i> icon-hand-left</li>
                                                <li><i class="icon-hand-up"></i> icon-hand-up</li>
                                                <li><i class="icon-hand-down"></i> icon-hand-down</li>
                                                <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
                                                <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
                                                <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
                                                <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
                                                <li><i class="icon-globe"></i> icon-globe</li>
                                                <li><i class="icon-wrench"></i> icon-wrench</li>
                                                <li><i class="icon-tasks"></i> icon-tasks</li>
                                                <li><i class="icon-filter"></i> icon-filter</li>
                                                <li><i class="icon-briefcase"></i> icon-briefcase</li>
                                                <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
                                            </ul>
                                        </div><!--/box-body-->
                                    </div><!--/box-->
                                    
                                    
                                    <!-- =========================================
                                                        ELUSIVE ICONS
                                    =========================================== -->
                                     <div class="box corner-all">
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rotateOut">&times;</a>
                                            </div>
                                            <span>Elusive Icons (recommendation of the bootstrap)</span>
                                        </div><!--/box-header-->
                                        <div class="box-body">
                                            <header>
                                                <h2>Bootstrap Default Icons</h1>
                                            </header>
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="elusive-glass"></i> elusive-glass</li>
                                                <li><i class="elusive-music"></i> elusive-music</li>
                                                <li><i class="elusive-search"></i> elusive-search</li>
                                                <li><i class="elusive-envelope"></i> elusive-envelope</li>
                                                <li><i class="elusive-heart"></i> elusive-heart</li>
                                                <li><i class="elusive-star"></i> elusive-star</li>
                                                <li><i class="elusive-star-empty"></i> elusive-star-empty</li>
                                                <li><i class="elusive-user"></i> elusive-user</li>
                                                <li><i class="elusive-film"></i> elusive-film</li>
                                                <li><i class="elusive-th-large"></i> elusive-th-large</li>
                                                <li><i class="elusive-th"></i> elusive-th</li>
                                                <li><i class="elusive-th-list"></i> elusive-th-list</li>
                                                <li><i class="elusive-ok"></i> elusive-ok</li>
                                                <li><i class="elusive-remove"></i> elusive-remove</li>
                                                <li><i class="elusive-zoom-in"></i> elusive-zoom-in</li>
                                                <li><i class="elusive-zoom-out"></i> elusive-zoom-out</li>
                                                <li><i class="elusive-off"></i> elusive-off</li>
                                                <li><i class="elusive-signal"></i> elusive-signal</li>
                                                <li><i class="elusive-cog"></i> elusive-cog</li>
                                                <li><i class="elusive-trash"></i> elusive-trash</li>
                                                <li><i class="elusive-home"></i> elusive-home</li>
                                                <li><i class="elusive-file"></i> elusive-file</li>
                                                <li><i class="elusive-time"></i> elusive-time</li>
                                                <li><i class="elusive-road"></i> elusive-road</li>
                                                <li><i class="elusive-download-alt"></i> elusive-download-alt</li>
                                                <li><i class="elusive-download"></i> elusive-download</li>
                                                <li><i class="elusive-upload"></i> elusive-upload</li>
                                                <li><i class="elusive-inbox"></i> elusive-inbox</li>
          
                                                <li><i class="elusive-play-circle"></i> elusive-play-circle</li>
                                                <li><i class="elusive-repeat"></i> elusive-repeat</li>
                                                <li><i class="elusive-refresh"></i> elusive-refresh</li>
                                                <li><i class="elusive-list-alt"></i> elusive-list-alt</li>
                                                <li><i class="elusive-lock"></i> elusive-lock</li>
                                                <li><i class="elusive-flag"></i> elusive-flag</li>
                                                <li><i class="elusive-headphones"></i> elusive-headphones</li>
                                                <li><i class="elusive-volume-off"></i> elusive-volume-off</li>
                                                <li><i class="elusive-volume-down"></i> elusive-volume-down</li>
                                                <li><i class="elusive-volume-up"></i> elusive-volume-up</li>
                                                <li><i class="elusive-qrcode"></i> elusive-qrcode</li>
                                                <li><i class="elusive-barcode"></i> elusive-barcode</li>
                                                <li><i class="elusive-tag"></i> elusive-tag</li>
                                                <li><i class="elusive-tags"></i> elusive-tags</li>
                                                <li><i class="elusive-book"></i> elusive-book</li>
                                                <li><i class="elusive-bookmark"></i> elusive-bookmark</li>
                                                <li><i class="elusive-print"></i> elusive-print</li>
                                                <li><i class="elusive-camera"></i> elusive-camera</li>
                                                <li><i class="elusive-font"></i> elusive-font</li>
                                                <li><i class="elusive-bold"></i> elusive-bold</li>
                                                <li><i class="elusive-italic"></i> elusive-italic</li>
                                                <li><i class="elusive-text-height"></i> elusive-text-height</li>
                                                <li><i class="elusive-text-width"></i> elusive-text-width</li>
                                                <li><i class="elusive-align-left"></i> elusive-align-left</li>
                                                <li><i class="elusive-align-center"></i> elusive-align-center</li>
                                                <li><i class="elusive-align-right"></i> elusive-align-right</li>
                                                <li><i class="elusive-align-justify"></i> elusive-align-justify</li>
                                                <li><i class="elusive-list"></i> elusive-list</li>
          
                                                <li><i class="elusive-indent-left"></i> elusive-indent-left</li>
                                                <li><i class="elusive-indent-right"></i> elusive-indent-right</li>
                                                <li><i class="elusive-facetime-video"></i> elusive-facetime-video</li>
                                                <li><i class="elusive-picture"></i> elusive-picture</li>
                                                <li><i class="elusive-pencil"></i> elusive-pencil</li>
                                                <li><i class="elusive-map-marker"></i> elusive-map-marker</li>
                                                <li><i class="elusive-adjust"></i> elusive-adjust</li>
                                                <li><i class="elusive-tint"></i> elusive-tint</li>
                                                <li><i class="elusive-edit"></i> elusive-edit</li>
                                                <li><i class="elusive-share"></i> elusive-share</li>
                                                <li><i class="elusive-check"></i> elusive-check</li>
                                                <li><i class="elusive-move"></i> elusive-move</li>
                                                <li><i class="elusive-step-backward"></i> elusive-step-backward</li>
                                                <li><i class="elusive-fast-backward"></i> elusive-fast-backward</li>
                                                <li><i class="elusive-backward"></i> elusive-backward</li>
                                                <li><i class="elusive-play"></i> elusive-play</li>
                                                <li><i class="elusive-pause"></i> elusive-pause</li>
                                                <li><i class="elusive-stop"></i> elusive-stop</li>
                                                <li><i class="elusive-forward"></i> elusive-forward</li>
                                                <li><i class="elusive-fast-forward"></i> elusive-fast-forward</li>
                                                <li><i class="elusive-step-forward"></i> elusive-step-forward</li>
                                                <li><i class="elusive-eject"></i> elusive-eject</li>
                                                <li><i class="elusive-chevron-left"></i> elusive-chevron-left</li>
                                                <li><i class="elusive-chevron-right"></i> elusive-chevron-right</li>
                                                <li><i class="elusive-plus-sign"></i> elusive-plus-sign</li>
                                                <li><i class="elusive-minus-sign"></i> elusive-minus-sign</li>
                                                <li><i class="elusive-remove-sign"></i> elusive-remove-sign</li>
                                                <li><i class="elusive-ok-sign"></i> elusive-ok-sign</li>
          
                                                <li><i class="elusive-question-sign"></i> elusive-question-sign</li>
                                                <li><i class="elusive-info-sign"></i> elusive-info-sign</li>
                                                <li><i class="elusive-screenshot"></i> elusive-screenshot</li>
                                                <li><i class="elusive-remove-circle"></i> elusive-remove-circle</li>
                                                <li><i class="elusive-ok-circle"></i> elusive-ok-circle</li>
                                                <li><i class="elusive-ban-circle"></i> elusive-ban-circle</li>
                                                <li><i class="elusive-arrow-left"></i> elusive-arrow-left</li>
                                                <li><i class="elusive-arrow-right"></i> elusive-arrow-right</li>
                                                <li><i class="elusive-arrow-up"></i> elusive-arrow-up</li>
                                                <li><i class="elusive-arrow-down"></i> elusive-arrow-down</li>
                                                <li><i class="elusive-share-alt"></i> elusive-share-alt</li>
                                                <li><i class="elusive-resize-full"></i> elusive-resize-full</li>
                                                <li><i class="elusive-resize-small"></i> elusive-resize-small</li>
                                                <li><i class="elusive-plus"></i> elusive-plus</li>
                                                <li><i class="elusive-minus"></i> elusive-minus</li>
                                                <li><i class="elusive-asterisk"></i> elusive-asterisk</li>
                                                <li><i class="elusive-exclamation-sign"></i> elusive-exclamation-sign</li>
                                                <li><i class="elusive-gift"></i> elusive-gift</li>
                                                <li><i class="elusive-leaf"></i> elusive-leaf</li>
                                                <li><i class="elusive-fire"></i> elusive-fire</li>
                                                <li><i class="elusive-eye-open"></i> elusive-eye-open</li>
                                                <li><i class="elusive-eye-close"></i> elusive-eye-close</li>
                                                <li><i class="elusive-warning-sign"></i> elusive-warning-sign</li>
                                                <li><i class="elusive-plane"></i> elusive-plane</li>
                                                <li><i class="elusive-calendar"></i> elusive-calendar</li>
                                                <li><i class="elusive-random"></i> elusive-random</li>
                                                <li><i class="elusive-comment"></i> elusive-comment</li>
                                                <li><i class="elusive-magnet"></i> elusive-magnet</li>
          
                                                <li><i class="elusive-chevron-up"></i> elusive-chevron-up</li>
                                                <li><i class="elusive-chevron-down"></i> elusive-chevron-down</li>
                                                <li><i class="elusive-retweet"></i> elusive-retweet</li>
                                                <li><i class="elusive-shopping-cart"></i> elusive-shopping-cart</li>
                                                <li><i class="elusive-folder-close"></i> elusive-folder-close</li>
                                                <li><i class="elusive-folder-open"></i> elusive-folder-open</li>
                                                <li><i class="elusive-resize-vertical"></i> elusive-resize-vertical</li>
                                                <li><i class="elusive-resize-horizontal"></i> elusive-resize-horizontal</li>
                                                <li><i class="elusive-hdd"></i> elusive-hdd</li>
                                                <li><i class="elusive-bullhorn"></i> elusive-bullhorn</li>
                                                <li><i class="elusive-bell"></i> elusive-bell</li>
                                                <li><i class="elusive-certificate"></i> elusive-certificate</li>
                                                <li><i class="elusive-thumbs-up"></i> elusive-thumbs-up</li>
                                                <li><i class="elusive-thumbs-down"></i> elusive-thumbs-down</li>
                                                <li><i class="elusive-hand-right"></i> elusive-hand-right</li>
                                                <li><i class="elusive-hand-left"></i> elusive-hand-left</li>
                                                <li><i class="elusive-hand-up"></i> elusive-hand-up</li>
                                                <li><i class="elusive-hand-down"></i> elusive-hand-down</li>
                                                <li><i class="elusive-circle-arrow-right"></i> elusive-circle-arrow-right</li>
                                                <li><i class="elusive-circle-arrow-left"></i> elusive-circle-arrow-left</li>
                                                <li><i class="elusive-circle-arrow-up"></i> elusive-circle-arrow-up</li>
                                                <li><i class="elusive-circle-arrow-down"></i> elusive-circle-arrow-down</li>
                                                <li><i class="elusive-globe"></i> elusive-globe</li>
                                                <li><i class="elusive-wrench"></i> elusive-wrench</li>
                                                <li><i class="elusive-tasks"></i> elusive-tasks</li>
                                                <li><i class="elusive-filter"></i> elusive-filter</li>
                                                <li><i class="elusive-briefcase"></i> elusive-briefcase</li>
                                                <li><i class="elusive-fullscreen"></i> elusive-fullscreen</li>
                                            </ul>
                                            <h2>Extra Icons</h2>
                                            <h3>Social Icons</h3>
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="elusive-facebook"></i> elusive-facebook</li>
                                                <li><i class="elusive-twitter"></i> elusive-twitter</li>
                                                <li><i class="elusive-googleplus"></i> elusive-googleplus</li>
                                                <li><i class="elusive-linkedin"></i> elusive-linkedin</li>
                                                <li><i class="elusive-pinterest"></i> elusive-pinterest</li>
                                                <li><i class="elusive-foursquare"></i> elusive-foursquare</li>
                                                <li><i class="elusive-youtube"></i> elusive-youtube</li>
                                                <li><i class="elusive-vimeo"></i> elusive-vimeo</li>
                                                <li><i class="elusive-skype"></i> elusive-skype</li>
                                                <li><i class="elusive-picasa"></i> elusive-picasa</li>
                                                <li><i class="elusive-stumbleupon"></i> elusive-stumbleupon</li>
                                                <li><i class="elusive-digg"></i> elusive-digg</li>
                                                <li><i class="elusive-tumblr"></i> elusive-tumblr</li>
                                                <li><i class="elusive-github"></i> elusive-github</li>
                                                <li><i class="elusive-github-text"></i> elusive-github-text</li>
                                                <li><i class="elusive-friendfeed"></i> elusive-friendfeed</li>
                                                <li><i class="elusive-friendfeed-rect"></i> elusive-friendfeed-rect</li>
                                                <li><i class="elusive-wordpress"></i> elusive-wordpress</li>
                                                <li><i class="elusive-slideshare"></i> elusive-slideshare</li>
                                                <li><i class="elusive-reddit"></i> elusive-reddit</li>
                                                <li><i class="elusive-dribble"></i> elusive-dribble</li>
                                                <li><i class="elusive-behance"></i> elusive-behance</li>
                                                <li><i class="elusive-deviantart"></i> elusive-deviantart</li>
                                                <li><i class="elusive-delicious"></i> elusive-delicious</li>
                                            </ul>
                                            <hr />
                                            <h3>General Use Icons</h3>
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="elusive-website"></i> elusive-website</li>
                                                <li><i class="elusive-website-alt"></i> elusive-website-alt</li>
                                                <li><i class="elusive-fontsize"></i> elusive-fontsize</li>
                                                <li><i class="elusive-view-mode"></i> elusive-view-mode</li>
                                                <li><i class="elusive-wrench-alt"></i> elusive-wrench-alt</li>
                                                <li><i class="elusive-video-chat"></i> elusive-video-chat</li>
                                                <li><i class="elusive-video-alt"></i> elusive-video-alt</li>
                                                <li><i class="elusive-star-alt"></i> elusive-star-alt</li>
                                                <li><i class="elusive-video"></i> elusive-video</li>
                                                <li><i class="elusive-unlock"></i> elusive-unlock</li>
                                                <li><i class="elusive-unlock-alt"></i> elusive-unlock-alt</li>
                                                <li><i class="elusive-trash-alt"></i> elusive-trash-alt</li>
                                                <li><i class="elusive-torso"></i> elusive-torso</li>
                                                <li><i class="elusive-reverse-alt"></i> elusive-reverse-alt</li>
                                                <li><i class="elusive-stop-alt"></i> elusive-stop-alt</li>
                                                <li><i class="elusive-play-alt"></i> elusive-play-alt</li>
                                                <li><i class="elusive-pause-alt"></i> elusive-pause-alt</li>
                                                <li><i class="elusive-record"></i> elusive-record</li>
                                                <li><i class="elusive-repeat-alt"></i> elusive-repeat-alt</li>
                                                <li><i class="elusive-mic"></i> elusive-mic</li>
                                                <li><i class="elusive-mic-alt"></i> elusive-mic-alt</li>
                                                <li><i class="elusive-speaker"></i> elusive-speaker</li>
                                                <li><i class="elusive-smiley"></i> elusive-smiley</li>
                                                <li><i class="elusive-smiley-alt"></i> elusive-smiley-alt</li>
                                                <li><i class="elusive-search-alt"></i> elusive-search-alt</li>
                                                <li><i class="elusive-screen"></i> elusive-screen</li>
                                                <li><i class="elusive-screen-alt"></i> elusive-screen-alt</li>
                                                <li><i class="elusive-time-alt"></i> elusive-time-alt</li>
                                                <li><i class="elusive-shopping-cart-sign"></i> elusive-shopping-cart-sign</li>
                                                <li><i class="elusive-rss"></i> elusive-rss</li>
                                                <li><i class="elusive-quotes"></i> elusive-quotes</li>
                                                <li><i class="elusive-quotes-alt"></i> elusive-quotes-alt</li>
                                                <li><i class="elusive-photo"></i> elusive-photo</li>
                                                <li><i class="elusive-photo-alt"></i> elusive-photo-alt</li>
          
                                                <li><i class="elusive-wheelchair"></i> elusive-wheelchair</li>
                                                <li><i class="elusive-universal-access"></i> elusive-universal-access</li>
                                                <li><i class="elusive-question"></i> elusive-question</li>
                                                <li><i class="elusive-phone-alt"></i> elusive-phone-alt</li>
                                                <li><i class="elusive-phone"></i> elusive-phone</li>
                                                <li><i class="elusive-person"></i> elusive-person</li>
                                                <li><i class="elusive-pencil-alt"></i> elusive-pencil-alt</li>
                                                <li><i class="elusive-path"></i> elusive-path</li>
                                                <li><i class="elusive-paper-clip-alt"></i> elusive-paper-clip-alt</li>
                                                <li><i class="elusive-paper-clip"></i> elusive-paper-clip</li>
                                                <li><i class="elusive-network"></i> elusive-network</li>
                                                <li><i class="elusive-error-alt"></i> elusive-error-alt</li>
                                                <li><i class="elusive-error"></i> elusive-error</li>
                                                <li><i class="elusive-map-marker-alt"></i> elusive-map-marker-alt</li>
                                                <li><i class="elusive-male"></i> elusive-male</li>
                                                <li><i class="elusive-mail-alt"></i> elusive-mail-alt</li>
                                                <li><i class="elusive-lock-alt"></i> elusive-lock-alt</li>
                                                <li><i class="elusive-laptop-alt"></i> elusive-laptop-alt</li>
                                                <li><i class="elusive-laptop"></i> elusive-laptop</li>
                                                <li><i class="elusive-key"></i> elusive-key</li>
                                                <li><i class="elusive-iphone-home"></i> elusive-iphone-home</li>
                                                <li><i class="elusive-instagram"></i> elusive-instagram</li>
                                                <li><i class="elusive-inbox-alt"></i> elusive-inbox-alt</li>
                                                <li><i class="elusive-idea-alt"></i> elusive-idea-alt</li>
                                                <li><i class="elusive-idea"></i> elusive-idea</li>
                                                <li><i class="elusive-home-alt"></i> elusive-home-alt</li>
                                                <li><i class="elusive-heart-empty"></i> elusive-heart-empty</li>
                                                <li><i class="elusive-heart-alt"></i> elusive-heart-alt</li>
                                                <li><i class="elusive-hearing-impaired"></i> elusive-hearing-impaired</li>
                                                <li><i class="elusive-guidedog"></i> elusive-guidedog</li>
                                                <li><i class="elusive-group-alt"></i> elusive-group-alt</li>
                                                <li><i class="elusive-group"></i> elusive-group</li>
                                                <li><i class="elusive-graph-alt"></i> elusive-graph-alt</li>
                                                <li><i class="elusive-graph"></i> elusive-graph</li>
                                                <li><i class="elusive-globe-alt"></i> elusive-globe-alt</li>
                                                <li><i class="elusive-glasses"></i> elusive-glasses</li>
                                                <li><i class="elusive-forward-alt"></i> elusive-forward-alt</li>
                                                <li><i class="elusive-folder-sign"></i> elusive-folder-sign</li>
                                                <li><i class="elusive-folder"></i> elusive-folder</li>
                                                <li><i class="elusive-flickr"></i> elusive-flickr</li>
                                                <li><i class="elusive-flag-alt"></i> elusive-flag-alt</li>
                                                <li><i class="elusive-file-new-alt"></i> elusive-file-new-alt</li>
                                                <li><i class="elusive-file-new"></i> elusive-file-new</li>
                                                <li><i class="elusive-file-edit-alt"></i> elusive-file-edit-alt</li>
                                                <li><i class="elusive-file-edit"></i> elusive-file-edit</li>
                                                <li><i class="elusive-file-alt"></i> elusive-file-alt</li>
                                                <li><i class="elusive-female"></i> elusive-female</li>
                                                <li><i class="elusive-inbox-box"></i> elusive-inbox-box</li>
                                                <li><i class="elusive-dashboard"></i> elusive-dashboard</li>
                                                <li><i class="elusive-credit-card"></i> elusive-credit-card</li>
                                                <li><i class="elusive-compass-alt"></i> elusive-compass-alt</li>
                                                <li><i class="elusive-compass"></i> elusive-compass</li>
                                                <li><i class="elusive-comment-alt"></i> elusive-comment-alt</li>
                                                <li><i class="elusive-child"></i> elusive-child</li>
                                                <li><i class="elusive-cc"></i> elusive-cc</li>
                                                <li><i class="elusive-calendar-sign"></i> elusive-calendar-sign</li>
                                                <li><i class="elusive-blind"></i> elusive-blind</li>
                                                <li><i class="elusive-asl"></i> elusive-asl</li>
                                                <li><i class="elusive-cogs"></i> elusive-cogs</li>
                                                <li><i class="elusive-cog-alt"></i> elusive-cog-alt</li>
                                                <li><i class="elusive-cloud-alt"></i> elusive-cloud-alt</li>
                                                <li><i class="elusive-cloud"></i> elusive-cloud</li>
                                                <li><i class="elusive-braille"></i> elusive-braille</li>
                                                <li><i class="elusive-bookmark-empty"></i> elusive-bookmark-empty</li>
                                                <li><i class="elusive-blogger"></i> elusive-blogger</li>
                                                <li><i class="elusive-adult"></i> elusive-adult</li>
                                                <li><i class="elusive-address-book"></i> elusive-address-book</li>
                                                <li><i class="elusive-address-book-alt"></i> elusive-address-book-alt</li>
                                                <li><i class="elusive-w3c"></i> elusive-w3c</li>
                                                <li><i class="elusive-css"></i> elusive-css</li>
                                            </ul>
                                        </div>
                                    </div>
                                    
                                    
                                    <!-- =========================================
                                                        ICON FONT AWESOME
                                    =========================================== -->
                                     <div class="box corner-all">
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rotateOut">&times;</a>
                                            </div>
                                            <span>Icon Font Awesome</span>
                                        </div><!--/box-header-->
                                        <div class="box-body">
                                            <!--web application-->
                                            <h3>Web Application Icons</h3>
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="icofont-adjust"></i> icofont-adjust</li>
                                                <li><i class="icofont-asterisk"></i> icofont-asterisk</li>
                                                <li><i class="icofont-ban-circle"></i> icofont-ban-circle</li>
                                                <li><i class="icofont-bar-chart"></i> icofont-bar-chart</li>
                                                <li><i class="icofont-barcode"></i> icofont-barcode</li>
                                                <li><i class="icofont-beaker"></i> icofont-beaker</li>
                                                <li><i class="icofont-bell"></i> icofont-bell</li>
                                                <li><i class="icofont-bolt"></i> icofont-bolt</li>
                                                <li><i class="icofont-book"></i> icofont-book</li>
                                                <li><i class="icofont-bookmark"></i> icofont-bookmark</li>
                                                <li><i class="icofont-bookmark-empty"></i> icofont-bookmark-empty</li>
                                                <li><i class="icofont-briefcase"></i> icofont-briefcase</li>
                                                <li><i class="icofont-bullhorn"></i> icofont-bullhorn</li>
                                                <li><i class="icofont-calendar"></i> icofont-calendar</li>
                                                <li><i class="icofont-camera"></i> icofont-camera</li>
                                                <li><i class="icofont-camera-retro"></i> icofont-camera-retro</li>
                                                <li><i class="icofont-certificate"></i> icofont-certificate</li>
                                                <li><i class="icofont-check"></i> icofont-check</li>
                                                <li><i class="icofont-check-empty"></i> icofont-check-empty</li>
                                                <li><i class="icofont-cloud"></i> icofont-cloud</li>
                                                <li><i class="icofont-cog"></i> icofont-cog</li>
                                                <li><i class="icofont-cogs"></i> icofont-cogs</li>
                                                <li><i class="icofont-comment"></i> icofont-comment</li>
                                                <li><i class="icofont-comment-alt"></i> icofont-comment-alt</li>
                                                <li><i class="icofont-comments"></i> icofont-comments</li>
                                                <li><i class="icofont-comments-alt"></i> icofont-comments-alt</li>
                                                <li><i class="icofont-credit-card"></i> icofont-credit-card</li>
                                                <li><i class="icofont-dashboard"></i> icofont-dashboard</li>
                                                <li><i class="icofont-download"></i> icofont-download</li>
                                                <li><i class="icofont-download-alt"></i> icofont-download-alt</li>
                                                <li><i class="icofont-edit"></i> icofont-edit</li>
                                                <li><i class="icofont-envelope"></i> icofont-envelope</li>
                                                <li><i class="icofont-envelope-alt"></i> icofont-envelope-alt</li>

                                                <li><i class="icofont-exclamation-sign"></i> icofont-exclamation-sign</li>
                                                <li><i class="icofont-external-link"></i> icofont-external-link</li>
                                                <li><i class="icofont-eye-close"></i> icofont-eye-close</li>
                                                <li><i class="icofont-eye-open"></i> icofont-eye-open</li>
                                                <li><i class="icofont-facetime-video"></i> icofont-facetime-video</li>
                                                <li><i class="icofont-film"></i> icofont-film</li>
                                                <li><i class="icofont-filter"></i> icofont-filter</li>
                                                <li><i class="icofont-fire"></i> icofont-fire</li>
                                                <li><i class="icofont-flag"></i> icofont-flag</li>
                                                <li><i class="icofont-folder-close"></i> icofont-folder-close</li>
                                                <li><i class="icofont-folder-open"></i> icofont-folder-open</li>
                                                <li><i class="icofont-gift"></i> icofont-gift</li>
                                                <li><i class="icofont-glass"></i> icofont-glass</li>
                                                <li><i class="icofont-globe"></i> icofont-globe</li>
                                                <li><i class="icofont-group"></i> icofont-group</li>
                                                <li><i class="icofont-hdd"></i> icofont-hdd</li>
                                                <li><i class="icofont-headphones"></i> icofont-headphones</li>
                                                <li><i class="icofont-heart"></i> icofont-heart</li>
                                                <li><i class="icofont-heart-empty"></i> icofont-heart-empty</li>
                                                <li><i class="icofont-home"></i> icofont-home</li>
                                                <li><i class="icofont-inbox"></i> icofont-inbox</li>
                                                <li><i class="icofont-info-sign"></i> icofont-info-sign</li>
                                                <li><i class="icofont-key"></i> icofont-key</li>
                                                <li><i class="icofont-leaf"></i> icofont-leaf</li>
                                                <li><i class="icofont-legal"></i> icofont-legal</li>
                                                <li><i class="icofont-lemon"></i> icofont-lemon</li>
                                                <li><i class="icofont-lock"></i> icofont-lock</li>
                                                <li><i class="icofont-unlock"></i> icofont-unlock</li>
                                                <li><i class="icofont-magic"></i> icofont-magic</li>
                                                <li><i class="icofont-magnet"></i> icofont-magnet</li>
                                                <li><i class="icofont-map-marker"></i> icofont-map-marker</li>
                                                <li><i class="icofont-minus"></i> icofont-minus</li>
                                                <li><i class="icofont-minus-sign"></i> icofont-minus-sign</li>

                                                <li><i class="icofont-money"></i> icofont-money</li>
                                                <li><i class="icofont-move"></i> icofont-move</li>
                                                <li><i class="icofont-music"></i> icofont-music</li>
                                                <li><i class="icofont-off"></i> icofont-off</li>
                                                <li><i class="icofont-ok"></i> icofont-ok</li>
                                                <li><i class="icofont-ok-circle"></i> icofont-ok-circle</li>
                                                <li><i class="icofont-ok-sign"></i> icofont-ok-sign</li>
                                                <li><i class="icofont-pencil"></i> icofont-pencil</li>
                                                <li><i class="icofont-picture"></i> icofont-picture</li>
                                                <li><i class="icofont-plane"></i> icofont-plane</li>
                                                <li><i class="icofont-plus"></i> icofont-plus</li>
                                                <li><i class="icofont-plus-sign"></i> icofont-plus-sign</li>
                                                <li><i class="icofont-print"></i> icofont-print</li>
                                                <li><i class="icofont-pushpin"></i> icofont-pushpin</li>
                                                <li><i class="icofont-qrcode"></i> icofont-qrcode</li>
                                                <li><i class="icofont-question-sign"></i> icofont-question-sign</li>
                                                <li><i class="icofont-random"></i> icofont-random</li>
                                                <li><i class="icofont-refresh"></i> icofont-refresh</li>
                                                <li><i class="icofont-remove"></i> icofont-remove</li>
                                                <li><i class="icofont-remove-circle"></i> icofont-remove-circle</li>
                                                <li><i class="icofont-remove-sign"></i> icofont-remove-sign</li>
                                                <li><i class="icofont-reorder"></i> icofont-reorder</li>
                                                <li><i class="icofont-resize-horizontal"></i> icofont-resize-horizontal</li>
                                                <li><i class="icofont-resize-vertical"></i> icofont-resize-vertical</li>
                                                <li><i class="icofont-retweet"></i> icofont-retweet</li>
                                                <li><i class="icofont-road"></i> icofont-road</li>
                                                <li><i class="icofont-rss"></i> icofont-rss</li>
                                                <li><i class="icofont-screenshot"></i> icofont-screenshot</li>
                                                <li><i class="icofont-search"></i> icofont-search</li>
                                                <li><i class="icofont-share"></i> icofont-share</li>
                                                <li><i class="icofont-share-alt"></i> icofont-share-alt</li>
                                                <li><i class="icofont-shopping-cart"></i> icofont-shopping-cart</li>

                                                <li><i class="icofont-signal"></i> icofont-signal</li>
                                                <li><i class="icofont-signin"></i> icofont-signin</li>
                                                <li><i class="icofont-signout"></i> icofont-signout</li>
                                                <li><i class="icofont-sitemap"></i> icofont-sitemap</li>
                                                <li><i class="icofont-sort"></i> icofont-sort</li>
                                                <li><i class="icofont-sort-down"></i> icofont-sort-down</li>
                                                <li><i class="icofont-sort-up"></i> icofont-sort-up</li>
                                                <li><i class="icofont-star"></i> icofont-star</li>
                                                <li><i class="icofont-star-empty"></i> icofont-star-empty</li>
                                                <li><i class="icofont-star-half"></i> icofont-star-half</li>
                                                <li><i class="icofont-tag"></i> icofont-tag</li>
                                                <li><i class="icofont-tags"></i> icofont-tags</li>
                                                <li><i class="icofont-tasks"></i> icofont-tasks</li>
                                                <li><i class="icofont-thumbs-down"></i> icofont-thumbs-down</li>
                                                <li><i class="icofont-thumbs-up"></i> icofont-thumbs-up</li>
                                                <li><i class="icofont-time"></i> icofont-time</li>
                                                <li><i class="icofont-tint"></i> icofont-tint</li>
                                                <li><i class="icofont-trash"></i> icofont-trash</li>
                                                <li><i class="icofont-trophy"></i> icofont-trophy</li>
                                                <li><i class="icofont-truck"></i> icofont-truck</li>
                                                <li><i class="icofont-umbrella"></i> icofont-umbrella</li>
                                                <li><i class="icofont-upload"></i> icofont-upload</li>
                                                <li><i class="icofont-upload-alt"></i> icofont-upload-alt</li>
                                                <li><i class="icofont-user"></i> icofont-user</li>
                                                <li><i class="icofont-user-md"></i> icofont-user-md</li>
                                                <li><i class="icofont-volume-off"></i> icofont-volume-off</li>
                                                <li><i class="icofont-volume-down"></i> icofont-volume-down</li>
                                                <li><i class="icofont-volume-up"></i> icofont-volume-up</li>
                                                <li><i class="icofont-warning-sign"></i> icofont-warning-sign</li>
                                                <li><i class="icofont-wrench"></i> icofont-wrench</li>
                                                <li><i class="icofont-zoom-in"></i> icofont-zoom-in</li>
                                                <li><i class="icofont-zoom-out"></i> icofont-zoom-out</li>
                                            </ul><!--/web application-->
                                            
                                            <!--text editor-->
                                            <h3>Text Editor Icons</h3>
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="icofont-file"></i> icofont-file</li>
                                                <li><i class="icofont-cut"></i> icofont-cut</li>
                                                <li><i class="icofont-copy"></i> icofont-copy</li>
                                                <li><i class="icofont-paste"></i> icofont-paste</li>
                                                <li><i class="icofont-save"></i> icofont-save</li>
                                                <li><i class="icofont-undo"></i> icofont-undo</li>
                                                <li><i class="icofont-repeat"></i> icofont-repeat</li>
                                                <li><i class="icofont-paper-clip"></i> icofont-paper-clip</li>
                                                
                                                <li><i class="icofont-text-height"></i> icofont-text-height</li>
                                                <li><i class="icofont-text-width"></i> icofont-text-width</li>
                                                <li><i class="icofont-align-left"></i> icofont-align-left</li>
                                                <li><i class="icofont-align-center"></i> icofont-align-center</li>
                                                <li><i class="icofont-align-right"></i> icofont-align-right</li>
                                                <li><i class="icofont-align-justify"></i> icofont-align-justify</li>
                                                <li><i class="icofont-indent-left"></i> icofont-indent-left</li>
                                                <li><i class="icofont-indent-right"></i> icofont-indent-right</li>

                                                <li><i class="icofont-font"></i> icofont-font</li>
                                                <li><i class="icofont-bold"></i> icofont-bold</li>
                                                <li><i class="icofont-italic"></i> icofont-italic</li>
                                                <li><i class="icofont-strikethrough"></i> icofont-strikethrough</li>
                                                <li><i class="icofont-underline"></i> icofont-underline</li>
                                                <li><i class="icofont-link"></i> icofont-link</li>
                                                <li><i class="icofont-columns"></i> icofont-columns</li>
                                                <li><i class="icofont-table"></i> icofont-table</li>

                                                <li><i class="icofont-th-large"></i> icofont-th-large</li>
                                                <li><i class="icofont-th"></i> icofont-th</li>
                                                <li><i class="icofont-th-list"></i> icofont-th-list</li>
                                                <li><i class="icofont-list"></i> icofont-list</li>
                                                <li><i class="icofont-list-ol"></i> icofont-list-ol</li>
                                                <li><i class="icofont-list-ul"></i> icofont-list-ul</li>
                                                <li><i class="icofont-list-alt"></i> icofont-list-alt</li>
                                            </ul><!--/text editor-->
                                            
                                            <!--directional-->
                                            <h3>Directional Icons</h3>
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="icofont-arrow-down"></i> icofont-arrow-down</li>
                                                <li><i class="icofont-arrow-left"></i> icofont-arrow-left</li>
                                                <li><i class="icofont-arrow-right"></i> icofont-arrow-right</li>
                                                <li><i class="icofont-arrow-up"></i> icofont-arrow-up</li>
                                                <li><i class="icofont-chevron-down"></i> icofont-chevron-down</li>

                                                <li><i class="icofont-circle-arrow-down"></i> icofont-circle-arrow-down</li>
                                                <li><i class="icofont-circle-arrow-left"></i> icofont-circle-arrow-left</li>
                                                <li><i class="icofont-circle-arrow-right"></i> icofont-circle-arrow-right</li>
                                                <li><i class="icofont-circle-arrow-up"></i> icofont-circle-arrow-up</li>
                                                <li><i class="icofont-chevron-left"></i> icofont-chevron-left</li>

                                                <li><i class="icofont-caret-down"></i> icofont-caret-down</li>
                                                <li><i class="icofont-caret-left"></i> icofont-caret-left</li>
                                                <li><i class="icofont-caret-right"></i> icofont-caret-right</li>
                                                <li><i class="icofont-caret-up"></i> icofont-caret-up</li>
                                                <li><i class="icofont-chevron-right"></i> icofont-chevron-right</li>

                                                <li><i class="icofont-hand-down"></i> icofont-hand-down</li>
                                                <li><i class="icofont-hand-left"></i> icofont-hand-left</li>
                                                <li><i class="icofont-hand-right"></i> icofont-hand-right</li>
                                                <li><i class="icofont-hand-up"></i> icofont-hand-up</li>
                                                <li><i class="icofont-chevron-up"></i> icofont-chevron-up</li>
                                            </ul><!--/directional-->
                                            
                                            <!--video player-->
                                            <h3>Video Player Icons</h3>
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="icofont-play-circle"></i> icofont-play-circle</li>
                                                <li><i class="icofont-play"></i> icofont-play</li>
                                                <li><i class="icofont-pause"></i> icofont-pause</li>
                                                <li><i class="icofont-stop"></i> icofont-stop</li>

                                                <li><i class="icofont-step-backward"></i> icofont-step-backward</li>
                                                <li><i class="icofont-fast-backward"></i> icofont-fast-backward</li>
                                                <li><i class="icofont-backward"></i> icofont-backward</li>
                                                <li><i class="icofont-forward"></i> icofont-forward</li>

                                                <li><i class="icofont-fast-forward"></i> icofont-fast-forward</li>
                                                <li><i class="icofont-step-forward"></i> icofont-step-forward</li>
                                                <li><i class="icofont-eject"></i> icofont-eject</li>

                                                <li><i class="icofont-fullscreen"></i> icofont-fullscreen</li>
                                                <li><i class="icofont-resize-full"></i> icofont-resize-full</li>
                                                <li><i class="icofont-resize-small"></i> icofont-resize-small</li>
                                            </ul><!--/video player-->
                                            
                                            <!--social-->
                                            <h3>Social Icons</h3>
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="icofont-phone"></i> icofont-phone</li>
                                                <li><i class="icofont-phone-sign"></i> icofont-phone-sign</li>
                                                <li><i class="icofont-facebook"></i> icofont-facebook</li>
                                                <li><i class="icofont-facebook-sign"></i> icofont-facebook-sign</li>

                                                <li><i class="icofont-twitter"></i> icofont-twitter</li>
                                                <li><i class="icofont-twitter-sign"></i> icofont-twitter-sign</li>
                                                <li><i class="icofont-github"></i> icofont-github</li>
                                                <li><i class="icofont-github-sign"></i> icofont-github-sign</li>

                                                <li><i class="icofont-linkedin"></i> icofont-linkedin</li>
                                                <li><i class="icofont-linkedin-sign"></i> icofont-linkedin-sign</li>
                                                <li><i class="icofont-pinterest"></i> icofont-pinterest</li>
                                                <li><i class="icofont-pinterest-sign"></i> icofont-pinterest-sign</li>

                                                <li><i class="icofont-google-plus"></i> icofont-google-plus</li>
                                                <li><i class="icofont-google-plus-sign"></i> icofont-google-plus-sign</li>
                                                <li><i class="icofont-sign-blank"></i> icofont-sign-blank</li>
                                            </ul><!--/social-->
                                        </div><!--/box-body-->
                                    </div><!--/box-->
                                    <!-- =========================================
                                                        SOCIALICO
                                    =========================================== -->
                                     <div class="box corner-all">
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rotateOut">&times;</a>
                                            </div>
                                            <span>Socialico</span>
                                        </div><!--/box-header-->
                                        <div class="box-body">
                                            <!--socialico-->
                                            <ul class="icons-list unstyled socialico clearfix">
                                                <li><i class="socialico-aim"></i> socialico-aim</li>
                                                <li><i class="socialico-amazon"></i> socialico-amazon</li>
                                                <li><i class="socialico-badoo"></i> socialico-badoo</li>
                                                <li><i class="socialico-bebo"></i> socialico-bebo</li>
                                                <li><i class="socialico-behance"></i> socialico-behance</li>
                                                <li><i class="socialico-blogger"></i> socialico-blogger</li>
                                                <li><i class="socialico-deviantART"></i> socialico-deviantART</li>
                                                <li><i class="socialico-dribbble"></i> socialico-dribbble</li>
                                                <li><i class="socialico-facebook"></i> socialico-facebook</li>
                                                <li><i class="socialico-flickr"></i> socialico-flickr</li>
                                                <li><i class="socialico-google"></i> socialico-google</li>
                                                <li><i class="socialico-linkedin"></i> socialico-linkedin</li>
                                                <li><i class="socialico-myspace"></i> socialico-myspace</li>
                                                <li><i class="socialico-paypal"></i> socialico-paypal</li>
                                                <li><i class="socialico-quora"></i> socialico-quora</li>
                                                <li><i class="socialico-rss"></i> socialico-rss</li>
                                                <li><i class="socialico-skype"></i> socialico-skype</li>
                                                <li><i class="socialico-stumbleupon"></i> socialico-stumbleupon</li>
                                                <li><i class="socialico-tumblr"></i> socialico-tumblr</li>
                                                <li><i class="socialico-twitter"></i> socialico-twitter</li>
                                                <li><i class="socialico-twitter-text"></i> socialico-twitter-text</li>
                                                <li><i class="socialico-vimeo"></i> socialico-vimeo</li>
                                                <li><i class="socialico-wordpress"></i> socialico-wordpress</li>
                                                <li><i class="socialico-yahoo"></i> socialico-yahoo</li>
                                                <li><i class="socialico-youtube"></i> socialico-youtube</li>
                                                
                                                <li><i class="socialico-addthis"></i> socialico-addthis</li>
                                                <li><i class="socialico-apple"></i> socialico-apple</li>
                                                <li><i class="socialico-aim-sign"></i> socialico-aim-sign</li>
                                                <li><i class="socialico-amazon-sign"></i> socialico-amazon-sign</li>
                                                <li><i class="socialico-badoo-sign"></i> socialico-badoo-sign</li>
                                                <li><i class="socialico-bebo-sign"></i> socialico-bebo-sign</li>
                                                <li><i class="socialico-behance-sign"></i> socialico-behance-sign</li>
                                                <li><i class="socialico-blogger-sign"></i> socialico-blogger-sign</li>
                                                <li><i class="socialico-deviantART-sign"></i> socialico-deviantART-sign</li>
                                                <li><i class="socialico-dribbble-sign"></i> socialico-dribbble-sign</li>
                                                <li><i class="socialico-facebook-sign"></i> socialico-facebook-sign</li>
                                                <li><i class="socialico-feed"></i> socialico-feed</li>
                                                <li><i class="socialico-flickr-sign"></i> socialico-flickr-sign</li>
                                                <li><i class="socialico-google-sign"></i> socialico-google-sign</li>
                                                <li><i class="socialico-google-map"></i> socialico-google-map</li>
                                                <li><i class="socialico-google-talk"></i> socialico-google-talk</li>
                                                <li><i class="socialico-heart"></i> socialico-heart</li>
                                                <li><i class="socialico-ilike"></i> socialico-ilike</li>
                                                <li><i class="socialico-lastfm"></i> socialico-lastfm</li>
                                                <li><i class="socialico-linkedin-sign"></i> socialico-linkedin-sign</li>
                                                <li><i class="socialico-me"></i> socialico-me</li>
                                                <li><i class="socialico-myspace-sign"></i> socialico-myspace-sign</li>
                                                <li><i class="socialico-paypal-sign"></i> socialico-paypal-sign</li>
                                                <li><i class="socialico-picasa"></i> socialico-picasa</li>
                                                <li><i class="socialico-pinterest"></i> socialico-pinterest</li>
                                                <li><i class="socialico-qik"></i> socialico-qik</li>
                                                <li><i class="socialico-quora-sign"></i> socialico-quora-sign</li>
                                                <li><i class="socialico-rss-sign"></i> socialico-rss-sign</li>
                                                <li><i class="socialico-sharethis"></i> socialico-sharethis</li>
                                                <li><i class="socialico-skype-sign"></i> socialico-skype-sign</li>
                                                <li><i class="socialico-soundcloud"></i> socialico-soundcloud</li>
                                                <li><i class="socialico-start"></i> socialico-start</li>
                                                <li><i class="socialico-steam"></i> socialico-steam</li>
                                                <li><i class="socialico-stumbleupon-sign"></i> socialico-stumbleupon</li>
                                                <li><i class="socialico-tumblr-sign"></i> socialico-tumblr-sign</li>
                                                <li><i class="socialico-twitter-sign"></i> socialico-twitter-sign</li>
                                                <li><i class="socialico-twitter-text-sign"></i> socialico-twitter-text-sign</li>
                                                <li><i class="socialico-viddler"></i> socialico-viddler</li>
                                                <li><i class="socialico-vimeo-sign"></i> socialico-vimeo-sign</li>
                                                <li><i class="socialico-windows"></i> socialico-windows</li>
                                                <li><i class="socialico-wordpress-sign"></i> socialico-wordpress-sign</li>
                                                <li><i class="socialico-yahoo-sign"></i> socialico-yahoo-sign</li>
                                                <li><i class="socialico-youtube-sign"></i> socialico-youtube-sign</li>
                                                <li><i class="socialico-ziki"></i> socialico-ziki</li>
                                            </ul><!--/socialico-->
                                            
                                            <div class="alert"><strong>Note!</strong> You might like to try this with a helper color or background.</div>
                                            
                                        </div><!--/box-body-->
                                    </div><!--/box-->
                                    
                                    <!-- =========================================
                                                        TYPICONS
                                    =========================================== -->
                                     <div class="box corner-all">
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close" data-hide="rotateOut">&times;</a>
                                            </div>
                                            <span>Typicons</span>
                                        </div><!--/box-header-->
                                        <div class="box-body">
                                            <!--typicons-->
                                            <ul class="icons-list unstyled clearfix">
                                                <li><i class="typicn-anchor"></i> typicn-anchor</li>
                                                <li><i class="typicn-archive"></i> typicn-archive</li>
                                                <li><i class="typicn-back"></i> typicn-back</li>
                                                <li><i class="typicn-backspace"></i> typicn-backspace</li>
                                                <li><i class="typicn-barChart"></i> typicn-barChart</li>
                                                <li><i class="typicn-batteryHigh"></i> typicn-batteryHigh</li>
                                                <li><i class="typicn-batteryLow"></i> typicn-batteryLow</li>
                                                <li><i class="typicn-batteryMid"></i> typicn-batteryMid</li>
                                                <li><i class="typicn-batteryNone"></i> typicn-batteryNone</li>
                                                <li><i class="typicn-batteryPower"></i> typicn-batteryPower</li>
                                                <li><i class="typicn-beta"></i> typicn-beta</li>
                                                <li><i class="typicn-bookmark"></i> typicn-bookmark</li>
                                                <li><i class="typicn-brightness"></i> typicn-brightness</li>
                                                <li><i class="typicn-camera"></i> typicn-camera</li>
                                                <li><i class="typicn-cancel"></i> typicn-cancel</li>
                                                <li><i class="typicn-chat"></i> typicn-chat</li>
                                                <li><i class="typicn-cog"></i> typicn-cog</li>
                                                <li><i class="typicn-compass"></i> typicn-compass</li>
                                                <li><i class="typicn-contrast"></i> typicn-contrast</li>
                                                <li><i class="typicn-cut"></i> typicn-cut</li>
                                                <li><i class="typicn-delete"></i> typicn-delete</li>
                                                <li><i class="typicn-directions"></i> typicn-directions</li>
                                                <li><i class="typicn-down"></i> typicn-down</li>
                                                <li><i class="typicn-edit"></i> typicn-edit</li>
                                                <li><i class="typicn-eject"></i> typicn-eject</li>
                                                <li><i class="typicn-equals"></i> typicn-equals</li>
                                                <li><i class="typicn-expand"></i> typicn-expand</li>
                                                <li><i class="typicn-export"></i> typicn-export</li>
                                                <li><i class="typicn-feed"></i> typicn-feed</li>
                                                <li><i class="typicn-flag"></i> typicn-flag</li>
                                                <li><i class="typicn-forward"></i> typicn-forward</li>
                                                <li><i class="typicn-globe"></i> typicn-globe</li>
                                                <li><i class="typicn-grid"></i> typicn-grid</li>
                                                <li><i class="typicn-group"></i> typicn-group</li>
                                                <li><i class="typicn-heart"></i> typicn-heart</li>
                                                <li><i class="typicn-home"></i> typicn-home</li>
                                                <li><i class="typicn-infinity"></i> typicn-infinity</li>
                                                <li><i class="typicn-info"></i> typicn-info</li>
                                                <li><i class="typicn-key"></i> typicn-key</li>
                                                <li><i class="typicn-left"></i> typicn-left</li>
                                                <li><i class="typicn-lineChart"></i> typicn-lineChart</li>
                                                <li><i class="typicn-list"></i> typicn-list</li>
                                                <li><i class="typicn-location"></i> typicn-location</li>
                                                <li><i class="typicn-lock"></i> typicn-lock</li>
                                                <li><i class="typicn-loop"></i> typicn-loop</li>
                                                <li><i class="typicn-mail"></i> typicn-mail</li>
                                                <li><i class="typicn-message"></i> typicn-message</li>
                                                <li><i class="typicn-microphone"></i> typicn-microphone</li>
                                                <li><i class="typicn-minus"></i> typicn-minus</li>
                                                <li><i class="typicn-mobile"></i> typicn-mobile</li>
                                                <li><i class="typicn-move"></i> typicn-move</li>
                                                <li><i class="typicn-music"></i> typicn-music</li>
                                                <li><i class="typicn-mute"></i> typicn-mute</li>
                                                <li><i class="typicn-next"></i> typicn-next</li>
                                                <li><i class="typicn-phone"></i> typicn-phone</li>
                                                <li><i class="typicn-pieChart"></i> typicn-pieChart</li>
                                                <li><i class="typicn-pin"></i> typicn-pin</li>
                                                <li><i class="typicn-plus"></i> typicn-plus</li>
                                                <li><i class="typicn-power"></i> typicn-power</li>
                                                <li><i class="typicn-previous"></i> typicn-previous</li>
                                                <li><i class="typicn-puzzle"></i> typicn-puzzle</li>
                                                <li><i class="typicn-radar"></i> typicn-radar</li>
                                                <li><i class="typicn-refresh"></i> typicn-refresh</li>
                                                <li><i class="typicn-repeat"></i> typicn-repeat</li>
                                                <li><i class="typicn-right"></i> typicn-right</li>
                                                <li><i class="typicn-rss"></i> typicn-rss</li>
                                                <li><i class="typicn-shuffle"></i> typicn-shuffle</li>
                                                <li><i class="typicn-star"></i> typicn-star</li>
                                                <li><i class="typicn-sync"></i> typicn-sync</li>
                                                <li><i class="typicn-tab"></i> typicn-tab</li>
                                                <li><i class="typicn-tag"></i> typicn-tag</li>
                                                <li><i class="typicn-thumbsDown"></i> typicn-thumbsDown</li>
                                                <li><i class="typicn-thumbsUp"></i> typicn-thumbsUp</li>
                                                <li><i class="typicn-tick"></i> typicn-tick</li>
                                                <li><i class="typicn-time"></i> typicn-time</li>
                                                <li><i class="typicn-times"></i> typicn-times</li>
                                                <li><i class="typicn-unknown"></i> typicn-unknown</li>
                                                <li><i class="typicn-unlock"></i> typicn-unlock</li>
                                                <li><i class="typicn-up"></i> typicn-up</li>
                                                <li><i class="typicn-user"></i> typicn-user</li>
                                                <li><i class="typicn-views"></i> typicn-views</li>
                                                <li><i class="typicn-volume"></i> typicn-volume</li>
                                                <li><i class="typicn-warning"></i> typicn-warning</li>
                                                <li><i class="typicn-world"></i> typicn-world</li>
                                                <li><i class="typicn-write"></i> typicn-write</li>
                                                <li><i class="typicn-zoomIn"></i> typicn-zoomIn</li>
                                                <li><i class="typicn-zoomOut"></i> typicn-zoomOut</li>
                                            </ul><!--/typicons-->
                                        </div><!--/box-body-->
                                    </div><!--/box-->
                                    
                                </div><!--/span-->
                            </div><!--/icons-->
                        </div><!--/content-body -->
                    </div><!-- /content -->
                </div><!-- /span content -->
                
                <!-- span side-right -->
                <div class="span2">
                    <!-- side-right -->
                    <aside class="side-right">
                        <!-- sidebar-right -->
                        <div class="sidebar-right">
                            <!--sidebar-right-header-->
                            <div class="sidebar-right-header">
                                <div class="sr-header-right">
                                    <h2><span class="label label-info">$26,875</span></h2>
                                </div>
                                <div class="sr-header-left">
                                    <p class="bold">Balance</p>
                                    <small class="muted">Dec 30 2012</small>
                                </div>
                            </div><!--/sidebar-right-header-->
                            <!--sidebar-right-control-->
                            <div class="sidebar-right-control">
                                <ul class="sr-control-item">
                                    <li class="active"><a href="#contact" data-toggle="tab" title="contacts"><i class="icofont-group"></i></a></li>
                                    <li><a href="#alt1" data-toggle="tab" title="alternative 1"><i class="icofont-flag"></i></a></li>
                                    <li rel="tooltip-bottom" title="view site"><a href="index.html" target="_BLANK"><i class="icofont-external-link"></i></a></li>
                                </ul>
                            </div><!-- /sidebar-right-control-->
                            <!-- sidebar-right-content -->
                            <div class="sidebar-right-content">
                                <div class="tab-content">
                                    <!--contact-->
                                    <div class="tab-pane fade active in" id="contact">
                                        <div class="side-contact">
                                            <!--contact-control-->
                                            <div class="contact-control">
                                                <div class="btn-group pull-right">
                                                    <button class="dropdown-toggle bg-transparent no-border" data-toggle="dropdown">
                                                        <i class="icofont-caret-down"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#"><i class="icofont-certificate color-green"></i> Online</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-silver-dark"></i> Ofline</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-red"></i> Busy</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-orange"></i> Idle</a></li>
                                                    </ul>
                                                </div>
                                                <h5><i class="icofont-comment color-green"></i> John Doe</h5>
                                            </div><!--/contact-control-->
                                            <!--contact-search-->
                                            <div class="contact-search">
                                                <div class="input-icon-prepend">
                                                    <div class="icon">
                                                        <button type="submit">
                                                            <i class="typicn-message color-silver-dark"></i>
                                                        </button>
                                                    </div>
                                                    <input class="input-block-level grd-white" maxlength="11" type="text" name="contact-search" placeholder="chat with..." />
                                                </div>
                                            </div><!--/contact-search-->
                                            <!--contact-list, we set this max-height:380px, you can set this if you want-->
                                            <ul class="contact-list">
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="iin@mail.com">
                                                        <!--we use contact-item structure like the component media in bootstrap-->
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="busy"><i class="icofont-certificate color-red"></i></div>
                                                                <p class="contact-item-heading bold">Iin T.</p>
                                                                <p class="help-block"><small class="muted">Team Leader</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="sungep@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="idle"><i class="icofont-certificate color-orange"></i></div>
                                                                <p class="contact-item-heading bold">Sungep</p>
                                                                <p class="help-block"><small class="muted">UI designer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="harab@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="ofline"><i class="icofont-certificate color-silver-dark"></i></div>
                                                                <p class="contact-item-heading bold">Harab</p>
                                                                <p class="help-block"><small class="muted">Team Leader</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white active"> <!-- you can use this for active contact or your self status-->
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="janesmith@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="online"><i class="icofont-certificate color-green"></i></div>
                                                                <p class="contact-item-heading bold">Jane smith</p>
                                                                <p class="help-block"><small class="muted">Data analyst</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="mahardika@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="online"><i class="icofont-certificate color-green"></i></div>
                                                                <p class="contact-item-heading bold">Mahardika</p>
                                                                <p class="help-block"><small class="muted">PHP Developer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="opytama@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="ofline"><i class="icofont-certificate color-silver-dark"></i></div>
                                                                <p class="contact-item-heading bold">Opytama</p>
                                                                <p class="help-block"><small class="muted">PHP Developer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul><!--/contact-list-->
                                        </div>
                                    </div><!--/contact-->
                                    
                                    <!--chat-->
                                    <div class="tab-pane fade" id="chat">
                                        <div class="side-chat">
                                            <!--header part-->
                                            <div class="chat-header">
                                                <div class="chat-action">
                                                    <div class="btn-group pull-right">
                                                        <!--we use data toggle tab for navigate this action-->
                                                        <a class="bg-transparent no-border" href="#contact" data-toggle="tab" title="minimize"><i class="icofont-minus"></i></a>
                                                        <a class="bg-transparent no-border" title="pop out"><i class="icofont-resize-full"></i></a>
                                                        <a class="bg-transparent no-border" href="#contact" data-toggle="tab" title="close"><i class="icofont-remove-sign"></i></a>
                                                    </div>
                                                </div>
                                                <h5><i class="icofont-certificate color-green"></i> Jane smith</h5>
                                            </div>
                                            <!--content part-->
                                            <div class="chat-content">
                                                <div class="chat-in">
                                                    <span class="chat-time">10:45am</span>
                                                    <strong class="chat-user">Jane smith: </strong>
                                                    <div class="chat-text">Lorem ipsum dolor</div>
                                                </div>
                                                <div class="chat-out">
                                                    <span class="chat-time">10:47am</span>
                                                    <strong class="chat-user">me: </strong>
                                                    <div class="chat-text">Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut</div>
                                                </div>
                                                <div class="chat-in">
                                                    <span class="chat-time">10:50am</span>
                                                    <strong class="chat-user">Jane smith: </strong>
                                                    <div class="chat-text">Et sagittis ut vel dolor nullam proin</div>
                                                </div>
                                                <div class="chat-out">
                                                    <span class="chat-time">10:52am</span>
                                                    <strong class="chat-user">me: </strong>
                                                    <div class="chat-text">massa massa quisque sodales id dictumst.</div>
                                                </div>
                                            </div>
                                            <!--status typed part-->
                                            <div class="chat-typed"><i class="typicn-chat"></i> Jane smith is typing...</div>
                                            <!--input part-->
                                            <div class="chat-input">
                                                <div class="chat-desc muted">Lorem ipsum dolor sit amet.</div>
                                                <textarea class="input-block-level" placeholder="chat here..."></textarea>
                                            </div>
                                        </div>
                                        <div class="divider-content"><span></span></div>
                                    </div><!--chat-->
                                    
                                    <!--alternative 1-->
                                    <div class="tab-pane fade" id="alt1">
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <button class="btn btn-block btn-mini btn-primary">Add Action</button>
                                        <button class="btn btn-block btn-mini">Add Action</button>
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <!-- side-task -->
                                        <div class="side-task">
                                            <div class="task active">
                                                <span class="task-header">
                                                    <img src="img/loader_16.gif" /> 
                                                    <strong>Portofolio_W34GF.zip</strong>
                                                </span>
                                                <span class="task-desc">9.1 of 17MB - 243KB/sec - 1 min</span>
                                                <div class="progress progress-striped active" rel="tooltip" title="40%">
                                                    <div class="bar bar-success" style="width: 40%;"></div>
                                                </div>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Paralax_bg_5448.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-remove-sign color-red" title="failed"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="typicn-loop color-silver-dark" title="cancel"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="typicn-loop color-silver-dark" title="cancel"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Icons_bg_I98GH.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-remove-sign color-red" title="failed"></i>
                                                <span class="task-desc">Dashboard_3805.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                        </div><!-- /side-task -->
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                    </div><!--/alternative 1-->
                                    
                                </div>
                            </div><!-- /sidebar-right-content -->
                        </div><!-- /sidebar-right -->
                    </aside><!-- /side-right -->
                </div><!-- /span side-right -->
            </div>
        </section>

        <!-- section footer -->
        <footer>
            <a rel="to-top" href="#top"><i class="icofont-circle-arrow-up"></i></a>
        </footer>

        <!-- javascript
        ================================================== -->
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/uniform/jquery.uniform.js"></script>
        
        <!-- required sms template js, for full feature-->
        <script src="js/holder.js"></script>
        <script src="js/sms-base.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                // try your js
                
                // uniform
                $('[data-form=uniform]').uniform();
            });
      
        </script>
    </body>
</html>